<template>
  <view>
    <Navbar title="任务详情" bgColor="#fff" :hideBtn="true" :h5Show="false"></Navbar>

    <view class="mobile-item-container">
      <view style="font-size: 40rpx; font-weight: bold; padding: 0 0 40rpx 0;">主刷信息</view>
      <view style="min-height: 200rpx">
        <TaskItem :data="detail" v-if="!!detail" :showActions="false"></TaskItem>
      </view>
    </view>
    <Gap />
    <view class="mobile-item-container">
      <view style="font-size: 40rpx; font-weight: bold; padding: 0 0 40rpx 0;">拖刷信息</view>
      <view style="min-height: 200rpx">
        <TaskDragItem :data="detail" v-if="!!detail"></TaskDragItem>
      </view>
    </view>
  </view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import Gap from '@/components/gap/Gap'
import { getOrderDetail } from '@/api/order'
import TaskItem from './components/task-item.vue'
import TaskDragItem from './components/task-drag-item.vue'

export default {
  components: {
    Gap,
    Navbar,
    TaskItem,
    TaskDragItem
  },
  data() {
    return {
      detail: undefined,
      loading: false,
      id: undefined
    }
  },
  methods: {
    getDetail() {
      getOrderDetail({ id: Number(this.id) }).then((res) => {
        console.log('getOrderDetail', res);
        this.detail = res.data || {}
      })
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getDetail()
  }
}
</script>

<style lang="scss"></style>